﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 —— www.zhinengshe.com 智能社</title>
<link rel="stylesheet" type="text/css" href="zns_style.css">
<script type="text/javascript" src="../js/jquery-1.8.3.min.js">
</script>
<script src="move.js"></script>
<script>
function getByClass(oParent, sClass)
{
	var aEle=oParent.getElementsByTagName('*');
	var aResult=[];
	
	for(var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	
	return aResult;
}

$(function ()
{
	var oDiv=$('div.playimages');
	var oBtnPrev=getByClass(oDiv, 'prev')[0];
	var oBtnNext=getByClass(oDiv, 'next')[0];
	var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
	var oMarkRight=getByClass(oDiv, 'mark_right')[0];
	
	var oDivSmall=getByClass(oDiv, 'small_pic')[0];
	var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
	var aLiSmall=oDivSmall.getElementsByTagName('li');
	
	var oUlBig=getByClass(oDiv, 'big_pic')[0];
	var aLiBig=oUlBig.getElementsByTagName('li');
	
	var nowZIndex=2;
	
	var now=0;
	
	oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
	
	//左右按钮
	oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()
	{
		startMove(oBtnPrev, 'opacity', 100);
	};
	oBtnPrev.onmouseout=oMarkLeft.onmouseout=function ()
	{
		startMove(oBtnPrev, 'opacity', 0);
	};
	oBtnNext.onmouseover=oMarkRight.onmouseover=function ()
	{
		startMove(oBtnNext, 'opacity', 100);
	};
	oBtnNext.onmouseout=oMarkRight.onmouseout=function ()
	{
		startMove(oBtnNext, 'opacity', 0);
	};
	
	//大图切换
	for(var i=0;i<aLiSmall.length;i++)
	{
		aLiSmall[i].index=i;
		aLiSmall[i].onclick=function ()
		{
			if(this.index==now)return;
			
			now=this.index;
			
			tab();
		};
		
		aLiSmall[i].onmouseover=function ()
		{
			startMove(this, 'opacity', 100);
		};
		aLiSmall[i].onmouseout=function ()
		{
			if(this.index!=now)
			{
				startMove(this, 'opacity', 60);
			}
		};
	}
	
	function tab()
	{
		aLiBig[now].style.zIndex=nowZIndex++;
		
		for(var i=0;i<aLiSmall.length;i++)
		{
			startMove(aLiSmall[i], 'opacity', 60);
		}
		
		startMove(aLiSmall[now], 'opacity', 100);
		
		aLiBig[now].style.height=0;
		startMove(aLiBig[now], 'height', 320);
		
		if(now==0)
		{
			startMove(oUlSmall, 'left', 0);
		}
		else if(now==aLiSmall.length-1)
		{
			startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);
		}
		else
		{
			startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);
		}
	}
	
	oBtnPrev.onclick=function ()
	{
		now--;
		if(now==-1)
		{
			now=aLiSmall.length-1;
		}
		
		tab();
	};
	
	oBtnNext.onclick=function ()
	{
		now++;
		if(now==aLiSmall.length)
		{
			now=0;
		}
		
		tab();
	};
	
	var timer=setInterval(oBtnNext.onclick, 2000);
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	oDiv.onmouseout=function ()
	{
		timer=setInterval(oBtnNext.onclick, 2000);
	};
});
</script>
</head>

<body>
<div class="playimages" class="play">
    <ul class="big_pic">

		<div class="prev"></div>
		<div class="next"></div>

		<div class="text">加载图片说明……</div>
		<div class="length">计算图片数量……</div>
		
		<a class="mark_left" href="javascript:;"></a>
		<a class="mark_right" href="javascript:;"></a>
		<div class="bg"></div>
		
        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>
</html>
